<template>
  <view class="container">
    <!--  带搜索的标题栏  -->
    <view class="back-layout hor-layout">
      <view class="back-view" @click="navBack">
        <i class="iconfont back-icon">&#xe8de;</i>
      </view>
      <u-search margin="8px" placeholder="请输入商品名称" v-model="search" :action-style="searchStyle"
                @search="refreshData" @custom="refreshData" @clear="refreshData"></u-search>
    </view>
    <!--  tab标签栏  -->
    <u-tabs class="tab-list-layout" :list="tabList" :active-item-style="activeStyle"
            active-color="#FF873E" inactive-color="#999999" :current="currentTab" @change="change"></u-tabs>
    <!--  商品列表  -->
    <scroll-view class="goods-list-layout" scroll-y @scrolltolower="onScrollBottom">
      <view v-if="goodsList.length>0" class="flex-grid-layout">
        <view class="goods-item ver-layout" :class="{'right':(index+1)%2===0}"
              v-for="(item,index) in goodsList" :key="index" @click="toGoodsDetail(item)">
          <image class="goods-item-image" :src="item.imageurl.url"></image>
          <view class="goods-item-content hor-layout-side-center">
            <view class="goods-name">{{ item.name }}</view>
            <view class="goods-score">积分
              <span style="color:#42B4AB">{{ item.points }}</span></view>
          </view>
          <view class="goods-detail-btn">查看详情</view>
        </view>
      </view>
      <view v-else class="list-no-data">暂无数据</view>
      <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
    </scroll-view>
    <!--  添加商品  -->
    <view class="add-goods-btn" @click="toAddGoods">
      添加商品
    </view>
  </view>
</template>

<script>
import {addGoods, goodsDetail} from "@/router.js"
import {GoodsManageApi} from "@/api/goodsManage.js"

let engine = new GoodsManageApi()

export default {
  name: "goodsList",
  data() {
    return {
      search: '',
      searchStyle: {
        color: 'white',
        width: '60px',
        height: '28px',
        lineHeight: '28px',
        borderRadius: '14px',
        background: '#ff9900',
      },
      activeStyle: {
        color: '#333333'
      },
      tabList: [{name: "全部"}, {name: "钢琴"},],
      currentTab: 0,
      goodsList: [{imageurl:{url:''}},{imageurl:{url:''}}],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad(){
    this.getGoodsTypes()
  },
  methods: {
    getGoodsTypes() {
      engine.getGoodsTypes().then(res => {
        let {goods_cates, goods_types} = res.data,
            all = {name: '全部', id: '', type: 'all'}
        goods_cates.forEach(item => item.type = 'cate')
        goods_types.forEach(item => item.type = 'type')
        this.tabList = [all, ...goods_cates, ...goods_types]
        this.refreshData()
      })
    },
    getGoodsList() {
      let tabObj = this.tabList[this.currentTab]
      let key = this.search,
          page = this.loadingObj.current,
          cate_id = tabObj.type === 'cate' ? tabObj.id : '',
          type_id = tabObj.type === 'type' ? tabObj.id : ''
      engine.getGoodsList({key, cate_id, type_id, page}).then(res => {
        this.goodsList = this.goodsList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.goodsList = []
      this.getGoodsList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getGoodsList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.goodsList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    onScrollBottom(e) {
      console.log("onScrollBottom", e)
      this.loadMore()
    },
    navBack() {
      this.$u.route({type: 'back'})
    },
    toAddGoods() {
      this.$u.route({url: addGoods})
    },
    change(index) {
      this.currentTab = index;
      this.refreshData()
    },
    toGoodsDetail(item) {
      this.$u.route({url: goodsDetail, params: item})
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}

.back-layout {
  position: fixed;
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(var(--status-bar-height) + 44px);
  line-height: 44px;
  font-size: 16px;
  background: #42B4AC;
  z-index: 1000;
}

.back-view {
  padding-left: 9px;
  padding-right: 9px;
}

.back-icon {
  color: white;
  font-size: 22px;
}

.tab-list-layout {
  position: fixed;
  width: 100%;
  top: calc(44px + var(--status-bar-height));
  border-bottom: 1px solid #F2F2F2;
  z-index: 1000;
}

.goods-item {
  margin-top: 18px;
  width: calc(100% / 2 - 6px);
  margin-right: 12px;
}

.goods-item.right {
  margin-right: 0px;
}

.goods-item-image {
  width: 100%;
  height: 130px;
  background: lightgray;
}

.goods-list-layout {
  flex: 1;
  margin-top: calc(44px + 40px + var(--status-bar-height));
  padding-bottom: 60px;
  height: 100%;
}

.add-goods-btn {
  z-index: 100;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  border-top: 1px solid rgba(66, 180, 171, 0.2);
  text-align: center;
  line-height: 50px;
  /* 文本样式 */
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #42B4AB;
}

.goods-item-content {
  width: 100%;
  padding: 12px;
}

.goods-name {
  font-size: 14px;
  color: #333333;
}

.goods-score {
  font-size: 12px;
  color: #999999;
}

.goods-detail-btn {
  margin: 0px 15px;
  height: 27px;
  width: calc(100% - 15 * 2px);
  background: #F67562;
  border-radius: 13px;
  text-align: center;
  line-height: 27px;
  /*文本样式*/
  font-size: 14px;
  color: #FFFFFF;
  line-height: 25px;
}
</style>
